<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery实现省市之间层级联动</title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            // DOM文档对象初始化完毕
            // 先通过Ajax获取一个省的select数据
            $.ajax({
                url : "getSelect1Data",
                type : "GET",
                async :true,
                success : function(data){
                    // 这里获取到数据库返回数据
                    // 数据其实就是一个json字符串,表示的是所有的省对应的集合
                    // 因为后台Servlet生成的是从数据库查询出来的结果是转成的json字符串
                    // 则js解析之后得到的js对象就是一个数组;
                    var obj = JSON.parse(data)
                    // obj中就是数据,接下来将其展示在页面上
                    var s1 = $("s1");
                    // 对数据进行遍历
                    for (var i = 0; i < obj.length; i++) {
                        // 获取每个省的数据
                        var province = obj[i]
                        // 为新建的option标签增加显示的文本
                        var option = $("<option></option>").text(province.Text)
                        // 为新建的option标签添加value属性
                        option.val(province.value)
                        // 把创建的option对象追加到省的select中
                        s1.append(option)
                    }
                }
            })
        })
    </script>


</head>
<body>

<!-- 目的是实现层级联动 -->
<!-- 1. 监听第一个select切换的动作，值的变化 ：使用JS-->

省 ：<select id="s1" >
    <option value="北京">北京</option>
    <option value="江苏">江苏</option>
    <option value="上海">上海</option>

</select>

市 ：<select id="s2">
    <option value="东城">东城</option>
    <option value="南京">南京</option>
    <option value="黄浦">黄浦</option>

</select>

</body>
</html>